<template>
  <div class="box-main">
    <div class="header">
      <img class="header-close" src="@/assets/images/UpgradeDetails/icon2.png" alt="" />
      <p class="header-name">升级详情</p>
    </div>
    <div class="content">
      <div class="content-round">
        <img class="content-round-img" src="@/assets/images/comm/avatar.png" alt="" />
      </div>
      <div class="content-name">
        <div class="content-name-text">
          <p>退房令牌</p>
          <p class="content-name-text-tag">LV.49</p>
        </div>
        <div class="content-name-imgs">
          <img v-for="v in 5" :key="v" src="@/assets/images/UpgradeDetails/icon3.png" alt="" />
        </div>
      </div>
      <div class="content-btn">
        <span>家族</span>
        <img src="@/assets/images/UpgradeDetails/icon5.png" alt="" />
      </div>
    </div>
    <div class="card">
      <div class="card-tips">
        <img class="card-tips-sort-img" src="@/assets/images/UpgradeDetails/icon11.png" alt="" />
        <p>戴帽子进入34</p>
        <p class="card-tips-green">
          (
          <img src="@/assets/images/UpgradeDetails/icon6.png" alt="" />
          36)
        </p>
      </div>
      <div class="card-tips">
        <img class="card-tips-sort-img" src="@/assets/images/UpgradeDetails/icon12.png" alt="" />
        <p>自己或对方魅力值增加2.5%</p>
        <p class="card-tips-green">
          (
          <img src="@/assets/images/UpgradeDetails/icon6.png" alt="" />
          4.0%)
        </p>
      </div>
      <div class="card-tips">
        <img class="card-tips-sort-img" src="@/assets/images/UpgradeDetails/icon13.png" alt="" />
        <p>自己或对方魅力值增加260</p>
        <p class="card-tips-green">
          (
          <img src="@/assets/images/UpgradeDetails/icon6.png" alt="" />
          270
          )
        </p>
      </div>
    </div>

    <div class="title">
      25级解锁
      <img src="@/assets/images/UpgradeDetails/icon9.png" alt="" />
    </div>
    <div class="card card-open">
      <div class="card-tips">
        <img class="card-tips-sort-img" src="@/assets/images/UpgradeDetails/icon14.png" alt="" />
        <p>自己或对方魅力值增加260</p>
        <p class="card-tips-green">
          (
          <img src="@/assets/images/UpgradeDetails/icon6.png" alt="" />
          270)
        </p>
      </div>
    </div>
    <div class="title">
      45级解锁
      <img src="@/assets/images/UpgradeDetails/icon9.png" alt="" />
    </div>

    <div class="card card-not">
      <div class="card-tips">
        <img class="card-tips-sort-img" src="@/assets/images/UpgradeDetails/icon15.png" alt="" />
        <p>执行次数未结束主页会持续戴帽子</p>
      </div>
    </div>
    <div class="title">
      <span>70级解锁</span>
      <div class="flex-center">
        (
        <img src="@/assets/images/UpgradeDetails/icon10.png" alt="" />
        满级效果)
      </div>
      <img src="@/assets/images/UpgradeDetails/icon9.png" alt="" />
    </div>
    <div class="card card-not">
      <div class="card-tips">
        <img class="card-tips-sort-img" src="@/assets/images/UpgradeDetails/icon16.png" alt="" />
        <p>自己或对方魅力值增加2.5%</p>
        <p class="card-tips-green">
          (
          <img src="@/assets/images/UpgradeDetails/icon6.png" alt="" />
          3.0%)
        </p>
      </div>
      <div class="card-tips">
        <img class="card-tips-sort-img" src="@/assets/images/UpgradeDetails/icon10.png" alt="" />
        <p>自己或对方魅力值增加2.5%</p>
        <p class="card-tips-green">
          (
          <img src="@/assets/images/UpgradeDetails/icon6.png" alt="" />
          3.0%)
        </p>
      </div>
    </div>
    <div class="title">强化效果说明</div>
    <div class="card">
      * 技能满级后续可以继续强化，强化成功后各项属性增加
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box-main {
  background-image: url('@/assets/images/UpgradeDetails/icon1.png');
  background-size: 100% 60.77rem;
  background-repeat: no-repeat;
  padding: 7.69rem 3.08rem;

  .title {
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 4.1rem;
    color: #666666;
    line-height: 4.1rem;
    display: flex;
    align-items: center;
    margin: 5.13rem 0rem;

    img {
      width: 4.1rem;
      height: 4.1rem;
      display: block;
      margin-left: 0.51rem;
    }
  }

  .card-not {
    &::before {
      content: '';
      width: 16.15rem;
      height: 8.97rem;
      background-image: url('@/assets/images/UpgradeDetails/icon8.png');
      background-size: 16.15rem 8.97rem;
      position: absolute;
      top: 3rem;
      right: 0;
    }
  }

  .card-open {
    &::before {
      content: '';
      width: 16.15rem;
      height: 8.97rem;
      background-image: url('@/assets/images/UpgradeDetails/icon7.png');
      background-size: 16.15rem 8.97rem;
      position: absolute;
      top: 3rem;
      right: 0;
    }
  }

  .card {
    padding: 5.13rem 3.59rem;
    background: #FFFFFF;
    border-radius: 2.56rem;
    position: relative;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 3.08rem;
    color: #666666;
    line-height: 4.36rem;

    &-tips {
      display: flex;
      align-items: center;
      margin-bottom: 2.56rem;

      &:last-child {
        margin-bottom: 0;
      }

      &-green {
        display: flex;
        align-items: center;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 3.08rem;
        color: #70B33C;
        line-height: 4.36rem;

        img {
          width: 3.08rem;
          height: 3.08rem;
          display: block;
        }
      }

      &-sort-img {
        width: 4.1rem;
        height: 4.36rem;
        display: block;
        margin-right: 1.54rem;
      }
    }
  }

  .content {
    margin-top: 8.12rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 4.87rem;
    position: relative;

    &-btn {
      padding: 0.51rem 2.05rem;
      border-radius: 18.97rem 18.97rem 18.97rem 18.97rem;
      border: 0.26rem solid #F4EDFF;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 3.08rem;
      color: #A26EFC;
      line-height: 4.36rem;
      display: flex;
      align-items: center;
      position: absolute;
      right: 0;
      bottom: 4.87rem;

      img {
        width: 3.08rem;
        height: 3.08rem;
        margin-left: 0.51rem;
        display: block;
      }
    }

    &-name {
      margin-top: 3.85rem;
      display: flex;
      flex-direction: column;
      align-items: center;

      &-imgs {
        display: flex;
        align-items: center;
        gap: 0 1.03rem;
        margin-top: 1.03rem;

        img {
          width: 6.67rem;
          height: 6.67rem;
          display: block;
        }
      }

      &-text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 4.62rem;
        color: #333333;
        line-height: 6.41rem;
        display: flex;
        align-items: center;

        &-tag {
          padding: 0.51rem 1.03rem;
          background: linear-gradient(180deg, #FDB840 0%, #FFC258 25%, #D0810B 79%, #E89821 100%);
          border-radius: 0.77rem 0.77rem 0.77rem 0.77rem;
          font-family: PingFang SC, PingFang SC;
          font-weight: 600;
          font-size: 2.56rem;
          color: #FFFFFF;
          line-height: 2.56rem;
          margin-left: 1.54rem;
        }
      }
    }

    &-round {
      width: 23.48rem;
      height: 23.48rem;
      background: #FFFFFF;
      border-radius: 35.9rem 35.9rem 35.9rem 35.9rem;
      display: flex;
      align-items: center;
      padding: 1rem;
      justify-content: center;

      &-img {
        border-radius: 50%;
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }

  .header {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 2.05rem;

    &-close {
      width: 4.1rem;
      height: 4.1rem;
      display: block;
    }

    &-name {
      font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
      font-weight: 700;
      font-size: 6.15rem;
      line-height: 6.15rem;
      background: linear-gradient(270deg, #D33AFD 0%, #4A75FF 100%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .flex-center {
    display: flex;
    align-items: center;
  }
}
</style>